<template>
    <div>
        <slot />
        <div>
            <span>维度1</span>
            <el-select v-model="query.x" placeholder="全部">
                <el-option label="城市" value="city" />
                <el-option v-for="(name,key) in list1" :key="key" :label="key" :value="name" />
            </el-select>
        </div>
        <div>
            <span>维度2</span>
            <el-select v-model="query.y" placeholder="全部">
                <el-option v-for="(name,key) in list2" :key="key" :label="key" :value="name" />
            </el-select>
        </div>
        <vebar class="chart" :data="chartData" :settings="chartSettings" />
    </div>
</template>

<script>
import vebar from 'v-charts/lib/histogram.common.js'
import 'echarts/lib/component/title'
export default {
    components: {
        vebar
    },
    props: {
        type: String,
        value: Array
    },
    data () {
        this.chartSettings = {
            dimension: ['城市']
            // metrics: ['未认证', '上班族', '创业者', '在校生', '投资人', '服务商']
        }
        return {
            total: 0,
            query: {
                sys: undefined,
                pageSize: 20,
                pageNum: 1
            },
            list: {
                用户类型: 'type',
                标签: 'tag',
                渠道: 'channel',
                用户设备: 'devices'

            },
            tableData: [],
            chartData: {
                columns: ['用户类型', '访问用户'],
                rows: [
                    { 用户类型: '投资人', 访问用户: 1393 },
                    { 用户类型: '创业者', 访问用户: 3530 },
                    { 用户类型: '服务商', 访问用户: 2923 },
                    { 用户类型: '上班族', 访问用户: 1723 },
                    { 用户类型: '在校生', 访问用户: 3792 },
                    { 用户类型: '未认证', 访问用户: 4593 }
                ]
            }
        }
    },
    computed: {
        list1 () {
            return this.FilterSelect(this.query.y)
        },
        list2 () {
            return this.FilterSelect(this.query.x)
        }
    },
    watch: {
        /*         chartData: {
            deep: true,
            immediate: true,
            handler (val) {
                this.$emit('input', val.rows || [])
            }
        } */
    },
    created () {
        this.Query()
    },
    updated () {
        // this.Update()
    },
    methods: {
        FilterSelect (select) {
            const obj = {}
            for (const key in this.list) {
                if (this.list[key] !== select) {
                    obj[key] = this.list[key]
                }
            }
            return obj
        },
        Update () {
            console.log('up!!!!!!!!!!!!!!!!!!!!')
            this.$emit('updata', { tableData: this.tableData, total: this.total, pageSize: this.query.pageSize, pageNum: this.query.pageNum })
        },
        Query () {
            HTTP('用户属性').then(({ data: { chartData, pageList: { list: tableData, total } } }) => {
                // console.log(v)

                this.chartData = chartData
                this.total = total
                this.tableData = tableData
                this.Update()
            })
        }
    }
}
</script>

<style scoped lang="stylus">
</style>
